<template>
    <div class="app-container">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span style="line-height: 32px">项目资料配置</span>
                <el-button
                    style="float: right;"
                    type="primary"
                    icon="el-icon-plus"
                    size="small"
                    v-if="userButtonIds.indexOf('baseSet.proData.add') != -1"
                    @click="add_proData_button">新增项目资料
                </el-button>
            </div>

            <el-table
                border
                :data="proDatas"
                size="small"
                :header-cell-style="tableHeaderStyle"
                style="width: 100%">
                <el-table-column
                    fixed
                    align="center"
                    header-align="center"
                    type="index"
                    label="No."
                    width="100">
                    <template slot-scope="scope">
                        {{ (page.pageNum - 1) * page.pageSize + scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="dataName"
                    label="资料名称"
                    align="center"
                    header-align="center"
                    min-width="300">
                </el-table-column>
                <el-table-column
                    prop="mustFlag"
                    label="是否必须"
                    align="center"
                    header-align="center"
                    min-width="30">
                  <template slot-scope="scope">
                    <p>{{scope.row.mustFlag == 1 ? '是' : '否'}}</p>
                  </template>
                </el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作"
                    align="center"
                    header-align="center"
                    v-if="userButtonIds.indexOf('baseSet.proData.delete') != -1"
                    width="120">
                    <template slot-scope="scope">
                        <el-button
                            @click="deleteRow(scope.row.id)"
                            type="text"
                            v-if="userButtonIds.indexOf('baseSet.proData.delete') != -1"
                            size="small">
                            移除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div style="text-align:right;margin-top: 20px">
                <el-pagination
                    background
                    layout="prev, pager, next"
                    :page-size="page.pageSize"
                    @current-change="changePageCurrent"
                    :total="page.pageCount">
                </el-pagination>
            </div>

            <el-dialog title="新增项目资料" :visible.sync="add_dialogFormVisible" width="500px">
                <el-form :model="proData" ref="add_proData" label-width="80px" class="demo-ruleForm" size="small">
                    <el-form-item
                        label="资料名称"
                        prop="dataName"
                        :rules="[
                                  { required: true, message: '请输入项目资料名称'},
                                 { min: 0,max: 200, message: '最多200个字符',trigger: 'blur'},
                                ]">
                        <el-input
                                type="age"
                                v-model.trim="proData.dataName"
                                placeholder="请输入资料名称"
                                maxLength="200"
                                autocomplete="off">
                        </el-input>
                    </el-form-item>
                    <el-form-item
                      label="是否必须"
                      prop="mustFlag"
                      :rules="[
                                    { required: true, message: '请选择是否必须', trigger: 'change' }
                                  ]">
                      <el-select placeholder="请选择是否必须" v-model.trim="proData.mustFlag" style="width: 380px">
                        <el-option label="是" value="1"></el-option>
                        <el-option label="否" value="0"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('add_proData')" v-show="false">提交</el-button>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="cancelButton">取 消</el-button>
                    <el-button type="primary" @click="submitAddProRole('add_proData')">确 定</el-button>
                </div>
            </el-dialog>
        </el-card>
    </div>
</template>


<script>

import {http_proData_page, http_proData_add,http_proData_delete} from '@/api/proData'
import {Message} from "element-ui";
import {tableHeaderStyle,} from '@/utils/constant'

export default {
    data() {
        return {
            tableHeaderStyle:tableHeaderStyle,
            userButtonIds: JSON.parse(localStorage.getItem("user")).buttonIds,
            proDatas: [],
            proData: {},
            page:{},
            currentId: null,
            add_dialogFormVisible: false,
        }
    },
    methods: {
        http_page() {
            http_proData_page(this.page).then(result => {
                const {data} = result
                this.proDatas = data.records
                this.page = {
                    pageNum: data.current,
                    pageSize: data.size,
                    pageCount: data.total,
                }

            })
        },
        http_add() {
            http_proData_add(this.proData).then(result => {
                const { message, stateCode} = result
                if (stateCode == '0000') {
                    Message.success(message)
                    this.$refs["add_proData"].resetFields();
                    this.http_page()
                } else {
                    Message.error(message)
                }
            })
        },
        http_delete(){
            http_proData_delete(this.currentId).then(result=>{
                const { message, stateCode} = result
                if (stateCode == '0000') {
                    Message.success(message)
                    this.http_page()
                } else {
                    Message.error(message)
                }
            })
        },
        add_proData_button() {
            if (this.$refs['add_proData'] != null){
                this.$refs['add_proData'].clearValidate()
            }
            this.proData = {}
            this.add_dialogFormVisible = true
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.http_add()
                    this.add_dialogFormVisible = false
                } else {
                    return false;
                }
            });
        },
        cancelButton(){
            this.proData = {}
            this.add_dialogFormVisible = false
        },
        submitAddProRole(formName){
            this.submitForm(formName)
        },

        deleteRow(id) {
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.currentId = id
                this.http_delete()
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

        },
        changePageCurrent(value){
            this.page.pageNum = value
            this.http_page()
        },

    },
    created() {
        this.http_page()
    }
}
</script>


<style>
.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}

.box-card {
    width: 100%;
    height: 100%;
}

.el-dialog__body{
    margin-bottom: -30px;
}


</style>
